<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>车辆年代选择</title>
    <link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/css/base.css">
    <link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/mobile/css/master.css">
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?11ad56ca0738ac14d150a362fca3e058";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

</head>
<body>
    <div class="main" id="orderInfo">&nbsp;
        <div class="carInfo">
            <p>{$auto['brand_name']} {$auto['model_name']} {$auto['model_pl']} {$auto['model_year']}</p>
            <span id="J_valueJY">{$auto['capacity']}</span>
        </div>
        <menu>
            <ul>
                <li class="current">299套餐</li>
                <li>推荐套餐</li>
                <li class="hide">更多套餐敬请期待</li>
            </ul>
        </menu>
        <div class="server">
            <div class="serverMain">
                <div class="default current" id="J_default">
                    <div class="itemList">
                        <div class="nineNine">
                            <ul>
                                <li>
                                    <div class="select">
                                        <div class="selected">
                                            <img src="http://app2.haixiuyizhan.com/{$jiyouDef4['logo']}" alt="">
                                            <p class="name">{$jiyouDef4['pj_name']} {$jiyouDef4['weight']}L*1<a href="javascript:void(0)" onclick="chooseGoods.showList('#J_goodsListJY')">修改</a></p>
                                            <p class="price"><em class="J_price">￥{$jiyouDef4['pj_csprice']}</em> <span>￥{$jiyouDef4['pj_scprice']}</span></p>
                                            <input type="hidden" value="{$jiyouDef4['pj_id']}" class="J_jyId"/>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="select">
                                        <div class="selected">
                                            <img src="http://app2.haixiuyizhan.com/{$jilv[0]['logo']}" alt="">
                                            <p class="name">{$jilv[0]['pj_pinpai']} <a href="javascript:void(0)"  onclick="chooseGoods.showList('#J_goodsListJV')">修改</a></p>
                                            <p class="price">
                                                <em class="J_price">￥{$jilv[0]['pj_csprice']}</em>
                                                <span>￥{$jilv[0]['pj_scprice']}</span>
                                            </p>
                                            <input type="hidden" value="{$jilv[0]['pj_id']}" class="J_jvId"/>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <p class="subtotal">
                                <span>￥299</span>
                            </p>
                        </div>
                        <div class="other">
                            <gt name="auto['capacity']" value="4">
                            <p class="other">您的爱车排量较高，需要额外增加{$auto['capacity']-4}L机油</p>
                            </gt>
                            <if condition="($auto['capacity']-4) egt 4">
                                <div class="otherMain">
                                    <img src="http://app2.haixiuyizhan.com/{$jiyouDef4['logo']}" alt="">
                                    <p class="name">{$jiyouDef4['pj_name']} {$jiyouDef4['weight']}L*<php>echo floor(($auto['capacity']-4)/4);</php></p>
                                    <p class="price">
                                        <em class="J_price">￥{$jiyouDef4['pj_csprice']*floor(($auto['capacity']-4)/4)}</em>
                                        <span>￥{$jiyouDef4['pj_scprice']*floor(($auto['capacity']-4)/4)}</span>
                                    </p>
                                </div>
                            </if>
                            <if condition="($auto['capacity']%4) gt 0">
                                <div class="otherMain">
                                    <img src="http://app2.haixiuyizhan.com/{$jiyouDef1['logo']}" alt="">
                                    <p class="name">{$jiyouDef1['pj_name']} {$jiyouDef1['weight']}L*{$auto['capacity']%4}</p>
                                    <p class="price">
                                        
                                        <em class="J_price">￥{$jiyouDef1['pj_csprice']*($auto['capacity']%4)}</em>
                                        <span>￥{$jiyouDef1['pj_scprice']*($auto['capacity']%4)}</span>
                                    </p>
                                </div>
                            </if>
                            
                        </div>
                        <i class="selected"></i>
                    </div>
                </div>
                <div class="recommend" id="J_recommend">
                    <div class="txt hide">
                        <i class="">&#xe60c;</i>
                        <p>推荐理由：为了更好的保护您爱车的发动机，我们推荐您使用下列保养产品</p>
                    </div>
                    <div class="itemList">
                        <ul>
                            <li>
                                <div class="select">
                                    <div class="selected">
                                        <img src="http://app2.haixiuyizhan.com/{$jiyouRec4['logo']}" alt="">
                                        <p class="name">{$jiyouRec4['pj_name']} {$jiyouRec4['weight']}L*1</p>
                                        <p class="price">
                                            <em class="J_price">￥{$jiyouRec4['pj_csprice']}</em>
                                            <span>￥{$jiyouRec4['pj_scprice']}</span>
                                        </p>

                                        <input type="hidden" value="{$jiyouRec4['pj_id']}" class="J_jyId"/>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="select">
                                    <div class="selected">
                                        <img src="http://app2.haixiuyizhan.com/{$jilv[0]['logo']}" alt="">
                                        <p class="name">{$jilv[0]['pj_pinpai']}</p>
                                        <p class="price">
                                            <em class="J_price">￥{$jilv[0]['pj_csprice']}</em>
                                            <span>￥{$jilv[0]['pj_scprice']}</span>
                                        </p>
                                        <input type="hidden" value="{$jilv[0]['pj_id']}" class="J_jvId"/>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="other">
                        <gt name="auto['capacity']" value="4">
                        <p class="other">您的爱车排量较高，还需要额外增加{$auto['capacity']-4}L机油</p>
                        </gt>
                        <if condition="($auto['capacity']-4) egt 4">
                            <div class="otherMain">
                                <img src="http://app2.haixiuyizhan.com/{$jiyouRec4['logo']}" alt="">
                                
                                <p class="name">{$jiyouRec4['pj_name']} {$jiyouRec4['weight']}L*<php>echo floor(($auto['capacity']-4)/4);</php></p>
                                <p class="price">
                                    <em class="J_price">￥{$jiyouRec4['pj_csprice']*floor(($auto['capacity']-4)/4)}</em>
                                    <span>￥{$jiyouRec4['pj_scprice']*floor(($auto['capacity']-4)/4)}</span>
                                </p>
                            </div>
                        </if>
                        <if condition="($auto['capacity']%4) gt 0">
                            <div class="otherMain">
                                <img src="http://app2.haixiuyizhan.com/{$jiyouRec1['logo']}" alt="">
                                <p class="name">{$jiyouRec1['pj_name']} {$jiyouRec1['weight']}L*{$auto['capacity']%4}</p>
                                <p class="price">
                                    <em class="J_price">￥{$jiyouRec1['pj_csprice']*($auto['capacity']%4)}</em>
                                    <span>￥{$jiyouRec1['pj_scprice']*($auto['capacity']%4)}</span>
                                </p>
                            </div>
                        </if>
                    </div>
                    <i class="selected"></i>
                </div>
            </div>
        </div>
        
        <div class="userInfo hide">
            <h3><img src="{:C('WEB_URL')}Public/mobile/images/mobile_04.png" alt="">您的个人信息</h3>
            <input type="text" name="realname" placeholder="您的姓名"  />
            <input type="tel" name="phone" placeholder="您的手机号"  />
        </div>
        <div class="companyInfo hide">
            <h3><img src="{:C('WEB_URL')}Public/mobile/images/mobile_03.png" alt="">选择的维修厂</h3>
            <p>预约维修厂：</p>
            <input type="text" name="company" placeholder="请选择预约维修厂" id="J_wx_name" onclick="company.showList()" readonly="true" />
            <input type="hidden" name="wx_id" value="" id="J_wx_id" />
            <input type="hidden" name="wx_address" value="" id="J_wx_address" />
        </div>

        <div class="total">
            <p align="center" class="clearfix total">
                <em>总计：</em> <span id="J_totalPrice">￥299</span>
                <a href="javascript:void(0)" class="btnOrange" id="J_nextStep">下一步</a>
            </p>
        </div>
        <input type="hidden" name="v_id" value="" id="J_vId" />
    </div>

    <div id="companyList" class="hide">
        <div class="bg"></div>
        <div class="main">
            <p class="title">选择维修厂<a href="javascript:void(0)" class="close" onclick="company.hideList()">×</a></p>
            <ul>
                <volist name="company" id="vo">
                    <li onclick="company.chooseCompany('{$vo['id']}','{$vo['name']}','{$vo['address']}')">
                        <i>&#xe604;</i>
                        <img src="http://app2.haixiuyizhan.com/{$vo['headImage']}" alt="">
                        <p>{$vo['name']}</p>
                        <p>{$vo['address']}</p>
                    </li>
                </volist>
            </ul>
        </div>
    </div>

    <div class="dialog goodsList" id="J_goodsListJY">
        <div class="dialog-content">
            <div class="dialog-tit clearfix">
                选择机油
                <a href="javascript:void(0)" class="close error-icon">×</a>
            </div>
            <div class="content">
                <ul>
                    <volist name="jiyou4" id="vo">
                    <li onclick="chooseGoods.chooseJY({$vo['pj_id']},this)" <eq name="vo['pj_id']" value="$jiyouDef4['pj_id']"> class="current" </eq>>
                        <i>&#xe604;</i>
                        <img src="http://app2.haixiuyizhan.com/{$vo['logo']}" />
                        <p class="name">{$vo['pj_name']}</p>
                        <p class="price">￥{$vo['pj_csprice']}</p>
                    </li>
                    </volist>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="dialog goodsList" id="J_goodsListJV">
        <div class="dialog-content">
            <div class="dialog-tit clearfix">
                选择机滤
                <a href="javascript:void(0)" class="close error-icon">×</a>
            </div>
            <div class="content">
                <ul>
                    <volist name="jilv" id="vo">
                    <li onclick="chooseGoods.chooseJV({$vo['pj_id']},this)" <eq name="i" value="1"> class="current" </eq>>
                        <i>&#xe604;</i>
                        <img src="http://app2.haixiuyizhan.com/{$vo['logo']}">
                        <p class="name">{$vo['pj_pinpai']}</p>
                        <p class="desc hide">{$vo['content']}</p>
                        <p class="price">￥{$vo['pj_csprice']}</p>
                        
                    </li>
                    </volist>
                </ul>
            </div>
        </div>
    </div>

    <div id="msgTip">
        <p class="txt"></p>
    </div>
    
    <script type="text/javascript" src="{:C('WEB_URL')}Public/js/baseFn.js"></script>
    <script type="text/javascript" src="{:C('WEB_URL')}Public/js/zepto1.1.4.min.js"></script>
    <script type="text/javascript">


        

        var scrollToTop=0;

        var company={
            showList:function(){
                scrollToTop=document.body.scrollTop;
                $('#companyList').show();
                $("html,body").addClass("overflow-H");

            },
            hideList:function(){
                $("html,body").removeClass("overflow-H");
                $('#companyList').hide();
                document.body.scrollTop=scrollToTop;
            },
            chooseCompany:function(id,name,address){
                $("html,body").removeClass("overflow-H");
                $("#J_wx_name").val(name);
                $("#J_wx_id").val(id);
                $("#J_wx_address").val(address);
                $("#companyList").hide();
                document.body.scrollTop=scrollToTop;
            }
        }


        var time={
            showList:function(){
                scrollToTop=document.body.scrollTop;
                $('#timeList').show();
                $("html,body").addClass("overflow-H");
                
            },hideList:function(){
                $('#timeList').hide();
                $("html,body").removeClass("overflow-H");
                document.body.scrollTop=scrollToTop;
            },
            chooseTime:function(time){
                $('#timeList').hide();
                $("#J_hh").val(time);
                $("html,body").removeClass("overflow-H");
                document.body.scrollTop=scrollToTop;
            }
        }


        $("#J_btnSubmit").on("tap",function(){
            var partInfoDom=$("#orderInfo"),
                _t=this,
                data={};

            data['phone']=partInfoDom.find("input[name='phone']").val();
            data['realname']=partInfoDom.find("input[name='realname']").val();
            data['time']=partInfoDom.find("input[name='time']").val();
            data['wx_id']=partInfoDom.find("#J_wx_id").val();
            data['wx_name']=partInfoDom.find("#J_wx_name").val();
            data['wx_address']=partInfoDom.find("#J_wx_address").val();
            data['autoId']=getQuery("autoId");
            data['source']=4;
            data['hh']=partInfoDom.find("#J_hh").val();

            data['v_id']=$("#J_vId").val();


            if(data['wx_id']==0){
                showMsgTip("请选择一家您中意的维修厂");
                return false;
            }else if(data['time']==""){
                showMsgTip("请选择预约日期");
                return false;
            }else if(data['time'].replace(/\-/g, "")*1<minDate.replace(/\-/g,"")*1){
                showMsgTip("请预约"+minDate+"之后的日期");
                return false;
            }else if(data['hh']==""){
                showMsgTip("请选择具体时间");
                return false;
            }else if(data['realname']==""){
                showMsgTip("请输入您的姓名");
                return false;
            }else if(!/^(13|15|18|14|17)[0-9]{9}$/.test(data['phone'])){
                showMsgTip("请输入正确的手机号");
                return false;
            }

            $.ajax({
                url:"{:C('WEB_URL')}mobile/saveData/",
                type:"post",
                dataType:"json",
                data:data,
                success:function(res){
                    showMsgTip(res.info);

                    if(res.status==1){
                        showMsgTip(res.info,9000);
                    }else{
                        showMsgTip(res.info);
                    }
                }
            })
        })

var chooseGoods={
        choose:"J_default",
        init:function(){
            var _t=this;
            $("#J_totalPrice").html("￥"+this.getDefaultPrice());

            $("#J_default").on("click",function(){
                $(this).addClass("current");
                $("#J_recommend").removeClass("current");
                $("#J_totalPrice").html("￥"+_t.getDefaultPrice());
                _t.choose="J_default";
            })

            $("#J_recommend").on("click",function(){
                $(this).addClass("current");
                $("#J_default").removeClass("current");
                var total=0;
                $(this).find(".price").each(function(e){
                    total+=$(this).html().replace(/\D/g,"")*1;
                })
                $("#J_totalPrice").html("￥"+total);
                _t.choose="J_recommend";
            })

            $("#J_nextStep").on("click",function(){
                var jyId=$("#"+_t.choose).find(".J_jyId").val(),
                    jvId=$("#"+_t.choose).find(".J_jvId").val();
                    
                window.location.href="/baoyang/step3/val/"+jyId+","+jvId;
            })
        },
        showList:function(str){
            $(str).show();
        },

        //获取99套餐总价
        getDefaultPrice:function(){
            var total=0;
            total=$("#J_default").find(".subtotal").html().replace(/\D/g,"")*1;
            $("#J_default").find("div.other").find(".J_price").each(function(){
                total+=$(this).html().replace(/\D/g,"")*1;
            })
            return total;
        },
        //选择机油
        chooseJY:function(id,t){
            var _t=this;
            $(t).addClass("current").siblings("li").removeClass("current");
            $("#J_goodsListJY").hide();
            $.ajax({
                type:"post",
                url:"/baoyang/chooseJY.html",
                data:{"pj_id":id},
                dataType:"json",
                success:function(res){
                    if(res.status==1){
                        _t.printJY(res.data);
                    }else{
                        alert(res.info)
                    }
                }

            })
        },
        //输出选择后的机油数据
        printJY:function(data){
            var htmlFour='<img src="http://app2.haixiuyizhan.com/'+data['four']['logo']+'" alt="">'+
                        '<p class="name">'+data['four']['pj_name']+" "+data['four']['weight']+'L*1<a href="javascript:void(0)" onclick="chooseGoods.showList(\'#J_goodsListJY\')">修改</a></p>'+
                        '<p class="price"><em class="J_price">￥'+data['four']['pj_csprice']+'</em><span>￥'+data['four']['pj_scprice']+'</span></p>'+
                        '<input type="hidden" value="'+data['four']['pj_id']+'" class="J_jyId"/>',
                select=$("#J_default").find("div.selected"),
                valueJY=$("#J_valueJY").html(),
                htmlOther="<p class='other'>"+$("p.other").html()+"</p>";   //额外机油量

            select.eq(0).html(htmlFour);

            if(data['nine']){   //是否为套餐默认机油
                $(".subtotal").children("span").html("￥299");
            }else{
                var subtotal=data['four']['pj_csprice']*1+select.eq(1).find(".J_price").html().replace(/\D/g,"")*1;
                console.log(select.eq(1).find(".price").html().replace(/\D/g,""));
                $(".subtotal").children("span").html("￥"+subtotal);
            }

            var f=Math.floor((valueJY-4)/4),
                o=(valueJY-4)%4;
            if(f>0){
                htmlOther+='<div class="otherMain">'+
                                '<img src="http://app2.haixiuyizhan.com/'+data['four']['logo']+'" alt="">'+
                                '<p class="name">'+data['four']['pj_name']+" "+data['four']['weight']+'L*'+f+'</p>'+
                                '<p class="price"><em class="J_price">￥'+data['four']['pj_csprice']*f+'</em><span>￥'+data['four']['pj_scprice']*f+'</span></p>'+
                            '</div>';
            }

            if(o!=0){
                htmlOther+='<div class="otherMain">'+
                                '<img src="http://app2.haixiuyizhan.com/'+data['one']['logo']+'" alt="">'+
                                '<p class="name">'+data['one']['pj_name']+" "+data['four']['weight']+'L*'+o+'</p>'+
                                '<p class="price"><em class="J_price">￥'+data['one']['pj_csprice']*o+'</em><span>￥'+data['one']['pj_scprice']*o+'</span></p>'+
                            '</div>';
            }
            $("#J_default").find("div.other").html(htmlOther);
            $("#J_totalPrice").html("￥"+this.getDefaultPrice());
        },
        //选择机滤
        chooseJV:function(id,t){
            $(t).addClass("current").siblings("li").removeClass("current");
            $("#J_goodsListJV").hide();

            var tt=$(t).clone();
            tt.find("i").remove();
            tt.find(".desc").show();
            tt.find(".name").append('<a href="javascript:void(0)" onclick="chooseGoods.showList(\'#J_goodsListJV\')">修改</a>');

            

            var html=tt.html(),
                select=$("#J_default").find("div.selected"),
                total=0,
                index=$(t).index();

            select.eq(1).html(html).append('<input type="hidden" value="'+id+'" class="J_jvId"/>');

            if(index==0){
                total=299;
            }else{
                select.each(function(){
                    total+=$(this).find(".price").html().replace(/\D/g,"")*1;
                    console.log(total);
                })

            }
            
            $("#J_default").find(".subtotal").children("span").html("￥"+total);

            
            $("#J_totalPrice").html("￥"+this.getDefaultPrice());
        }
     }
     chooseGoods.init();


        

    </script>
</body>
</html>